<template>
  <div class="profile-header">
    <div class="left">
      <img v-lazy="require('@/static' + img)" alt="">
    </div>
    <div class="center">
      <p>嗨，你好： &nbsp; {{ sysUserName }}</p>
      <span class="iconfont icon-mail"></span>
      &nbsp;
      {{ sysUserid }}
    </div>
    <div class="right">
      <span class="iconfont icon-chevron-right"></span>
    </div>
  </div>
</template>

<script src="">
export default {
  name: 'ProfileHeader',
  data() {
    return {
      user: [],
      sysUserName: '',
      sysUserid: '',
      img: ''
    }
  },
  methods: {
    active() {
      this.user = sessionStorage.getItem('user')
      if (this.user) {
        // 拆解出来user的保存数据
        this.user = JSON.parse(this.user)
        this.sysUserName = this.user.name || ''
        this.sysUserid = this.user.id || ''
        this.img = this.user.img || ''
      }
    }
  },
  created() {
    window.addEventListener('setItem', () => {
      this.active()
    })
    this.active()
  },
}
</script>

<style scoped>
.profile-header {
  display: flex;
  height: 100px;
  background-color: var(--color-tint);
  color: #fff;
  box-shadow: 0 1px 1px rgba(100, 100, 100, 0.3);
}

.left {
  width: 130px;
  margin: auto;
}

.left img {
  width: 90px;
  display: block;
  margin: auto;
  border-radius: 50%;
}

.right {
  width: 80px;
  text-align: center;
  margin: auto;

}

.right span {
  font-size: 26px;
}

.center {
  flex: 1;
  font-size: 18px;
  text-align: left;
  line-height: 30px;
  margin: auto;
}

.center span {
  font-size: 18px;
}
</style>